
<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick } from 'vue';
import BPMDialog from "../components/BPMDialog.vue";
import ConnectionEdit from '@/views/ConnectionEdit.vue';
import { invoke } from '@tauri-apps/api/tauri'
import bpm from "../common/bpm.js"
// import { ElMessage } from 'element-plus';
// import { Connection } from "../common/models";
import ExportResult from './ExportResult.vue';

const edit_dialog: any = ref(null);
const edit_form: any = ref(null);

const data: any = reactive({
    items: [],
    keyword: null,
    currentTime: null
});

// const count = ref(0);

const handleEdit = (index: number, rowData: any) => {
    if (index == -1) {
        edit_dialog.value.show("添加数据库连接");
    }
    else {
        edit_dialog.value.show("编辑数据库连接");
        nextTick(() => {
            edit_form.value.setConnection(rowData.id);
        })
    }
};

const handleDelete = (rowData) => {
    bpm.confirm("提示", "确定要删除吗？", (data: boolean) => {
        if (!data) {
            return;
        }
        invoke("delete_connection", { id: rowData.id }).then((msg) => {
            query();
        }).catch((msg) => {
            console.error(msg);
        });
    });
};

const closeDialog = () => {
    if (edit_dialog.value.isVisible()) {
        edit_dialog.value.close();
        query();
    }

}

const query = () => {
    invoke("get_connections", { keyword: data.keyword }).then((result) => {
        data.items = result;
    }).catch((err) => {
        console.error(err);
    });
}

const exportDialog = ref(null);
const test1 = () => {
    exportDialog.value.show("导出中...");
}

// const test1 = () => {
//     invoke("test_insert_data", { id: "-QKWsP_NYu", kind: 1 }).then((result) => {
//         if (result) {
//             ElMessage({
//                 message: "执行成功",
//                 type: "success",
//             });
//         }
//         else {
//             ElMessage({
//                 message: "执行失败",
//                 type: "error",
//             });
//         }
//     }).catch(error => {
//         ElMessage({
//             message: "执行失败",
//             type: "error",
//         });
//         console.error(error);
//     })
// }

onMounted(() => {
    nextTick(() => {
        query();
    });
});
</script>

<template>
    <el-container>
        <el-header height="36px" style="background-color: #EFEFEF;padding:6px 0px 0px 5px;">
            <div style="float:left">
                <el-button type="primary" size="small" @click="handleEdit(-1, null)" style="display:inline">添加
                </el-button>
                <el-button type="primary" size="small" @click="test1" style="display:inline">测试1
                </el-button>
            </div>
            <div style="float:right;padding-right:15px">
                <el-input v-model="data.keyword" size="small" style="display:inline;margin-right:5px"
                    @keydown.enter="query" />
                <el-button type="primary" size="small" @click="query" style="display:inline;">查询</el-button>
            </div>
        </el-header>
        <el-main>
            <el-table :data="data.items">
                <el-table-column label="序号" width="80" type="index" header-align="center"></el-table-column>
                <el-table-column label="名称" prop="name" align="center" header-align="center" />
                <el-table-column label="主机" width="150" prop="host" align="center" header-align="center" />
                <el-table-column label="端口" width="80" prop="port" align="center" header-align="center" />
                <el-table-column label="用户名" width="120" prop="username" align="center" header-align="center" />
                <el-table-column label="密码" width="120" prop="password" align="center" header-align="center" />
                <el-table-column label="默认数据库" width="120" prop="database" align="center" header-align="center" />
                <el-table-column label="操作" width="160" align="center" header-align="center">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>
    <BPMDialog ref="edit_dialog" width="450px" height="380px">
        <ConnectionEdit ref="edit_form" @close-dialog="closeDialog"></ConnectionEdit>
    </BPMDialog>
    <ExportResult ref="exportDialog"></ExportResult>
</template>
<style></style>